import React, { FC, ReactElement, useMemo } from 'react';
import { Table, Button, Modal } from '@douyinfe/semi-ui';
import { KeywordSearch } from '@/components';
import ItemDetail from './sub/Detail';
import ItemOperate from './sub/Operate';

import { useFieldsGoodsList, useCurrentRow, useTableColumns } from './hooks';

import './List.scss';
import { useLocation } from 'react-router-dom';

const FieldsGoodsList: FC = (): ReactElement => {
  const routeLocation = useLocation();
  const queryKeyword: string = useMemo(() => {
    const params = new URLSearchParams(routeLocation.search);
    return window.decodeURIComponent(params.get('keyword') ?? '');
  }, [routeLocation.search]);
  const {
    page,
    pageSize,
    total,
    keyword,

    tableData,
    tableLoading,

    getList,
    refresh,
    setPage,
    setTableLoading,
    handleKeywordInputChange,
    handlePaginationChange,
  } = useFieldsGoodsList({ keyword: queryKeyword });
  const {
    currentRow,
    modalLoading,
    modalVisible,
    modalType,

    handleCreateClick,
    handleItemNameClick,
    handleEditClick,
    handleDeleteClick,
    handleAddSubmit,
    handleEditSubmit,
    handleCloseModal,
  } = useCurrentRow({
    refresh,
    setLoading: setTableLoading,
  });

  const tableColumns = useTableColumns({
    handleItemNameClick,
    handleEditClick,
    handleDeleteClick,
  });

  function handleSearch() {
    setPage(1);
    getList(1, pageSize, keyword);
  }

  return (
    <div className="container-full fields-goods-list">
      <KeywordSearch
        placeholder="请输入关键词（类型 / 名称 / 城市 / 地址）"
        loading={tableLoading}
        keyword={keyword}
        handleKeywordChange={handleKeywordInputChange}
        handleSearch={handleSearch}
      >
        <Button
          theme="solid"
          type="primary"
          onClick={handleCreateClick}
        >
          新建
        </Button>
      </KeywordSearch>
      <main className="main-content">
        <Table
          loading={tableLoading}
          columns={tableColumns}
          dataSource={tableData}
          scroll={{ x: '100%' }}
          pagination={{
            currentPage: page,
            pageSize,
            total,
            showSizeChanger: true,
            onChange: handlePaginationChange,
          }}
        />
      </main>
      {/* 新增 */}
      <Modal
        width={960}
        title={`添加类目`}
        visible={modalType === 'create' && modalVisible}
        onCancel={handleCloseModal}
        maskClosable={false}
        footer={<></>}
      >
        {modalType === 'create' && modalVisible && (
          <ItemOperate
            handleCloseModal={handleCloseModal}
            handleAddSubmit={handleAddSubmit}
            handleEditSubmit={handleEditSubmit}
          />
        )}
      </Modal>
      {/* 详情 */}
      <Modal
        width={960}
        title={`类目详情`}
        visible={modalType === 'detail' && modalVisible}
        onCancel={handleCloseModal}
        maskClosable={false}
        footer={<></>}
      >
        {!!currentRow.id && (
          <ItemDetail
            loading={modalLoading}
            {...currentRow}
          />
        )}
      </Modal>
      {/* 编辑 */}
      <Modal
        width={960}
        title={`编辑类目`}
        visible={modalType === 'edit' && modalVisible}
        onCancel={handleCloseModal}
        maskClosable={false}
        footer={<></>}
      >
        {modalType === 'edit' && modalVisible && Object.keys(currentRow).length > 0 && (
          <ItemOperate
            id={currentRow.id}
            currentRow={currentRow}
            handleCloseModal={handleCloseModal}
            handleAddSubmit={handleAddSubmit}
            handleEditSubmit={handleEditSubmit}
          />
        )}
      </Modal>
    </div>
  );
}

export default FieldsGoodsList;